<!DOCTYPE html>
<html class="pixel-ratio-3 retina android android-5 android-5-1-1">
<head>
    <title>添加处方</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="description" content="">

    <link rel="stylesheet" href="../../lib/weui.min.css">
    <link rel="stylesheet" href="../../css/jquery-weui.css">
    <link rel="stylesheet" href="../../css/home.css">
    <link rel="stylesheet" href="../../plugins/fontaw/css/font-awesome.css">
    <style>
        .tags {
            background-color: #fff;
            color: #777;
            padding: 4px 6px;
            width: 406px;
        }

        .tags:hover {
            border-color: #f59942;
            outline: 0 none;
        }

        .tags[class*="span"] {
            float: none;
            margin-left: 0;
        }

        .tags input[type="text"], .tags input[type="text"]:focus {
            border: 0 none;
            box-shadow: none;
            display: inline;
            line-height: 22px;
            margin: 0;
            outline: 0 none;
            padding: 4px 6px;
        }

        .tags .tag {
            background-color: #91b8d0;
            color: #fff;
            display: inline-block;
            font-size: 12px;
            font-weight: normal;
            margin-bottom: 3px;
            margin-right: 3px;
            padding: 4px 22px 5px 9px;
            position: relative;
            text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
            transition: all 0.2s ease 0s;
            vertical-align: baseline;
            white-space: nowrap;
        }

        .tags .tag .close {
            bottom: 0;
            color: #fff;
            float: none;
            font-size: 12px;
            line-height: 20px;
            opacity: 1;
            position: absolute;
            right: 0;
            text-align: center;
            text-shadow: none;
            top: 0;
            width: 18px;
        }

        .tags .tag .close:hover {
            background-color: rgba(0, 0, 0, 0.2);
        }

        .close {
            color: #000;
            float: right;
            font-size: 21px;
            font-weight: bold;
            line-height: 1;
            opacity: 0.2;
            text-shadow: 0 1px 0 #fff;
        }

        .close:hover, .close:focus {
            color: #000;
            cursor: pointer;
            opacity: 0.5;
            text-decoration: none;
        }

        button.close {
            background: transparent none repeat scroll 0 0;
            border: 0 none;
            cursor: pointer;
            padding: 0;
        }

        .tags .tag-warning {
            background-color: #ffb752;
        }

        .weui-cells__title {
            font-size: 0.8rem
        }

        input::-webkit-input-placeholder {
            color: #999;
            font-size: 0.2rem;
        }

        textarea::-webkit-input-placeholder {
            color: #999;
            font-size: 0.2rem
        }

        input::-moz-placeholder {
            color: #999;
        }

        input:-moz-placeholder {
            color: #999;
        }

        input {
            font-size: 0.8rem
        }

        .weui-textarea {
            font-size: 0.8rem
        }
    </style>
</head>
<body ontouchstart>

<div class="weui-flex">
    <div class="weui-flex__item">
        <div class="home-header">
            <h2>添加处方</h2>
        </div>
    </div>
</div>

<div class="weui-cells weui-cells_form box1">

    <div class="weui-cells weui-cells_form">
        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">患者姓名</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="text" id="name" placeholder="请输入患者姓名">
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd">
                <label class="weui-label">性别</label>
            </div>
            <div class="weui-cell__bd">
                <input type="text" class="weui-input" id='sex' placeholder="请选择患者性别"/>
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd">
                <label class="weui-label">年龄</label>
            </div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="number" id="age" placeholder="请输入年龄">
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd">
                <label class="weui-label">病、症名</label>
            </div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="text" id="diseaseName" placeholder="请输入病、症名">
            </div>
        </div>
    </div>

    <div class="weui-cells__title"><i class="fa fa-medkit" aria-hidden="true"></i> 处方</div>
    <div class="weui-cells">
        <div class="weui-cell tags" id="medicalBox" style="width: 100%;overflow-x:scroll;" >
            <input id="form-field-tags" type="text" name="tags" style="display: none;" disabled="disabled"/>
        </div>
    </div>
    <div class="weui-cells">
        <div class="weui-cell">
            <div class="weui-cell__bd" style="text-align: center">
                <a href="javascript:void(0);" onclick="addMedical()"><h4>添加药材</h4></a>
            </div>
        </div>
    </div>
    <div class="weui-cells">
        <div class="weui-cell">
            <div class="weui-cell__bd" style="text-align: center">
                共 <input class="tinyInput" id="prescriptionCount" type="number"/> 帖,每日 <input class="tinyInput"
                                                                                              id="dailyCount"
                                                                                              type="number"/> 帖,1帖分
                <input class="tinyInput" id="useCount" type="number"/> 次服用
            </div>
        </div>
    </div>

    <div class="weui-cells weui-cells_form">
        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">医嘱</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="text" id="doctorRemark" placeholder="必填">
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd">
                <label class="weui-label">补充收费</label>
            </div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="number" id="charge" placeholder="0为免费">
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd">
                <label class="weui-label">处方可见度</label>
            </div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="text" id="seeLevel" placeholder="请选择">
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd">
                <label class="weui-label">辨证思路</label>
            </div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="text" id="doctorThink" placeholder="选填,仅己可见">
            </div>
        </div>
    </div>


    <div class="weui-cells" onclick="doPreview()">
        <div class="weui-cell">
            <div class="weui-cell__bd" style="text-align: center">
                <a href="javascript:void(0);"><h4>添加处方</h4></a>
            </div>
        </div>
    </div>
</div>

<div class="box2">
    <div class="kk-container">
        <div class="weui-search-bar" id="searchBar">
            <form class="weui-search-bar__form">
                <div class="weui-search-bar__box">
                    <i class="weui-icon-search"></i>
                    <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索" required="">
                    <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
                </div>
                <label class="weui-search-bar__label" id="searchText">
                    <i class="weui-icon-search"></i>
                    <span>搜索</span>
                </label>
                <!--<input type="submit" value="test"/>-->
            </form>
            <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
        </div>
        <div class="slide-wraper">
            <div class="slide-box">
            </div>
        </div>

        <div>
            <ul class="kk-ul-ho">

            </ul>
        </div>

    </div>

    <div class="weui-tabbar" style="padding:0.3rem;text-align: center">
        <a class="weui-btn weui-btn_primary" onclick="doCommit()" href="javacript:void(0);">确认添加</a>
    </div>
</div>

<div class="box3">
    <div class="weui-form-preview">
        <div class="weui-form-preview__hd">
            <label class="weui-form-preview__label">患者姓名</label>
            <em class="weui-form-preview__value name"></em>
        </div>
        <div class="weui-form-preview__bd">
            <div class="weui-form-preview__item">
                <label class="weui-form-preview__label">性别</label>
                <span class="weui-form-preview__value sex"></span>
            </div>
            <div class="weui-form-preview__item">
                <label class="weui-form-preview__label">年龄</label>
                <span class="weui-form-preview__value age"></span>
            </div>
            <div class="weui-form-preview__item">
                <label class="weui-form-preview__label">病、症名</label>
                <span class="weui-form-preview__value diseaseName"></span>
            </div>
            <div class="weui-form-preview__item">
                <label class="weui-form-preview__label">处方</label>
                <span class="weui-form-preview__value medicalList"></span>
            </div>
            <div class="weui-form-preview__item">
                <label class="weui-form-preview__label">服用方法</label>
                <span class="weui-form-preview__value howToUse"></span>
            </div>
            <div class="weui-form-preview__item">
                <label class="weui-form-preview__label">医嘱</label>
                <span class="weui-form-preview__value doctorRemark"></span>
            </div>
            <div class="weui-form-preview__item">
                <label class="weui-form-preview__label">补充收费</label>
                <span class="weui-form-preview__value charge"></span>
            </div>
            <div class="weui-form-preview__item">
                <label class="weui-form-preview__label">处方可见度</label>
                <span class="weui-form-preview__value seeLevel"></span>
            </div>
            <div class="weui-form-preview__item">
                <label class="weui-form-preview__label">药费(单帖价格*贴数+补充收费)</label>
                <span class="weui-form-preview__value totalPrice"></span>
            </div>
        </div>
        <div class="weui-form-preview__ft">
            <a class="weui-form-preview__btn weui-form-preview__btn_default" onclick="doEdit()"
               href="javascript:">返回编辑</a>
            <button onclick="doAdd()" class="weui-form-preview__btn weui-form-preview__btn_primary" href="javascript:">确认提交
            </button>
        </div>
    </div>
</div>
<script src="/lib/jquery-2.1.4.js"></script>
<script src="/lib/fastclick.js"></script>
<script src="/js/jquery-weui.js"></script>
<script src="/js/home.js"></script>
<script>
    $("#sex").picker({
        title: "请选择患者性别",
        cols: [
            {textAlign: 'center', values: ['男', '女']}
        ]
    });
    $("#seeLevel").picker({
        title: "请选择购药前处方是否可见",
        cols: [
            {textAlign: 'center', values: ['购药前可见', '购药前不可见']}
        ]
    });
    var deleteMedical = function (obj) {
        for (var i = 0; i < medicalList.length; i++) {
            if (medicalList[i].medicalId == $(obj).prop("name"))
                medicalList.splice(i, 1);
        }
        $(obj).parent(".tag").remove();
        if (medicalList.length == 0) {
            $("#medicalBox").css("display", "none");
        }
    };
    var medicalList = [];
    var prescription = {};
    var searchList = [];
    var addParam ={};
    $(".box1").css("display", "");
    $(".box2").css("display", "none");
    $(".box3").css("display", "none");
    $("#medicalBox").css("display", "none");
    var doPreview = function () {
        $(".name").text($("#name").val());
        $(".sex").text($("#sex").val());
        $(".age").text($("#age").val());
        $(".diseaseName").text($("#diseaseName").val());
        var medicalListString = "";
        $.each(medicalList, function (index, object) {
            medicalListString += object.name + object.count + "克";
            if (index < medicalList.length - 1) {
                medicalListString += ","
            }
        });
        $(".medicalList").text(medicalListString);
        $(".howToUse").text("共 " + $("#prescriptionCount").val() + " 帖,每日 " + $("#dailyCount").val() + " 帖,1帖分 " + $("#useCount").val() + " 次服用");
        $(".doctorRemark").text($("#doctorRemark").val());
        $(".seeLevel").text($("#seeLevel").val());
        $(".doctorRemark").text($("#doctorRemark").val());
        $(".charge").text($("#charge").val());
        $.ajax({
            url: '/prescription/getPrescriptionPriceByMedical',
            type: 'POST',
            dataType: 'json',
            contentType: "application/json",
            data: JSON.stringify(medicalList),
            success: function (data) {
                addParam.totalPrice = (Number($("#prescriptionCount").val()*data) + Number($("#charge").val())).toFixed(2);
                        $(".totalPrice").text(addParam.totalPrice);
            }
        });
        addParam.suffererName = $("#name").val();
        addParam.suffererSex = $("#sex").val();
        addParam.suffererAge = $("#age").val();
        addParam.diseaseName = $("#diseaseName").val()
        addParam.prescriptionUsualId = null;
        addParam.prescriptionCount = $("#prescriptionCount").val();
        addParam.howToUse = "共 " + $("#prescriptionCount").val() + " 帖,每日 " + $("#dailyCount").val() + " 帖,1帖分 " + $("#useCount").val() + " 次服用";
        addParam.doctorRemark = $("#doctorRemark").val();
        addParam.charge = $("#charge").val();
        addParam.seeLevel = $("#seeLevel").val();
        addParam.doctorThink = $("#doctorThink").val();
        addParam.prescriptionDetail = medicalList;
        $(".box1").css("display", "none");
        $(".box3").css("display", "");
    }
    var doEdit = function () {
        $(".box1").css("display", "");
        $(".box3").css("display", "none");
    }
    var doAdd = function () {
        $.ajax({
            url: '/prescription/addPrescription',
            type: 'POST',
            dataType: 'json',
            contentType: "application/json",
            data: JSON.stringify(addParam),
            success: function (data) {
                alert("添加成功!");
                window.location.href = 'prescribe_all.html#tab1'
            }
        });
    }
    var addMedical = function () {
        $(".box1").css("display", "none");
        $(".box2").css("display", "");
        $(".kk-ul-ho").empty();
        $("#searchInput").val("");
        $(".slide-box").empty();
        searchList = [];
    }

    $(".weui-search-bar__form").submit(function () {
        $.ajax({
            type: "POST",
            url: '/prescription/getAllMedicals',
            data: {"name": $("#searchInput").val()},
            success: function (data) {
                $(".slide-box").html(data);
            },
            error: function () {
            }
        })
        return false;
    });
    $(".kk-ul-ho").delegate("a", "click", function () {
        $(this).parent().remove();
    });
    var buildItem = function (medicalId, medicalName) {
        var addFlag = true;
        $.each(searchList, function (index, object) {
            if (object.id == medicalId) {
                addFlag = false;
            }
        });
        if (addFlag) {
            var li = " <li>\n" +
                    "                <a><i class=\"fa fa-minus-circle\" aria-hidden=\"true\" style=\"color: darkred\"></i></a>\n" +
                    "                <span class='medicalId' id='" + medicalId + "'>" + medicalName + "</span>\n" +
                    "                <div style=\"display: -webkit-inline-box;float:right\">\n" +
                    "                    <input class=\"tinyInput\" type=\"number\"/>克\n" +
                    "                </div>\n" +
                    "            </li>";
            $(".kk-ul-ho").append(li);
            searchList.push({id: medicalId});
        }
    }
    var doCommit = function () {
        $(".kk-ul-ho").children().each(function () {
            var object = {};
            object.medicalId = $(this).children(".medicalId").attr("id");
            object.count = $(this).children("div").children().val();
            object.name = $(this).children(".medicalId").text();
            medicalList.push(object);
            $("#form-field-tags").before("<span class='tag' style='display: block'>" + object.name + " " + object.count + "g<button class='close' type='button' name='" + object.medicalId + "' onclick='deleteMedical(this)'>×</button></span>");
        });
        $(".box1").css("display", "");
        $(".box2").css("display", "none");
        if (medicalList.length && medicalList.length > 0) {
            $("#medicalBox").css("display", "");
        }
    }
</script>
</body>
</html>